<template>
<div class="box">
    <div class="box-header">
        <span class="title">{{title}}</span>
    </div>
    <div class="box-body">
        <div class="chart fullsize" id="chart-eff2-pressure"></div>
    </div>
    <dl-Pressure :show="showModal" :take="modalData"></dl-Pressure>
</div>
</template>

<script>
import Loading from '@/components/Loading'
import bus from '@/utils/bus'
import axios from 'axios'
import echarts from 'echarts'
import dlPressure from '@/view/eff2/dl-Pressure'

export default {
    name: '',
    data() {
        return {
            startTime: null,
            depName: null,
            option: null,
            showLoading: false,
            chartInstance:null,
            showModal:false,
            modalData:{
                name:null,
                groupName:null,
                rank:null,
                score:0,
                date:null
            }
        }
    },
    props: {
        title: String
    },
    components: {
        'x-loading': Loading,
        'dl-Pressure':dlPressure
    },
    methods: {
        renderChart() {
            this.showLoading = true
            var gain = 0.9;
            var myColor = ['#e63810', '#ff6b00', '#e3b61f', '#13b5b1'];
            var myBgColor = ['rgba(230,56,16,0.2)', 'rgba(255,107,0,0.2)', 'rgba(227,182,31,0.2)', 'rgba(19,181,177,0.2)'];

            this.option = {
                grid: {
                    left: '3%',
                    top: '10%',
                    right: '2%',
                    bottom: '5%',
                    containLabel: true
                },

                yAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(160,160,160,0.3)',
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'e63810',
                            fontSize: 12,
                        },
                        interval: 0
                    },
                    data: []
                }, {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: []
                }],

                xAxis: {
                    type: 'value',
                    name: '工作压力指数',
                    nameGap: 35,
                    nameTextStyle: {
                        color: '#ffffff',
                        fontSize: 12,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(160,160,160,0.3)',
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,0.8)',
                            fontSize: 12,
                        }
                    }
                },
                series: [{
                        type: 'bar',
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                show: true,
                                color: 'rgba(255,107,0,0.2)',
                                barBorderRadius: 50,
                                borderWidth: 0,
                                borderColor: '#333',
                            }
                        },
                        label: {
                            normal: {
                                show: false,

                            }
                        },
                        barWidth: '35%',
                        data: []
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#ff6b00',
                                barBorderRadius: 50,
                                borderWidth: 0,
                                borderColor: '#333',
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                formatter:'{c}分',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12,
                                }
                            }
                        },
                        barWidth: '35%',
                        data: []
                    }
                ]
            };
            let params = {
                GroupName: this.depName,
                startTime: this.startTime
            }
            axios.get(this.URLHEAD_DVS + 'GetWorkPressDataByDepartmentName', {
                params: params
            }).then(res => {
                let json = res.data
                json.Data = json.Data.reverse()
                this.option.yAxis[0].data = json.Data.map(o => {
                    return o.userName
                })
                this.option.yAxis[1].data = json.Data.map(o => {
                    return o.userName
                })
                this.option.series[0].data = json.Data.map(o => {
                    return 100
                })
                this.option.series[1].data = json.Data.map(o => {
                    return {value:o.score,name:o.userName,rank:o.ranking}
                })
                this.chartInstance = this.$Crender('chart-eff2-pressure', this.option)
                var $this = this;
                this.chartInstance.on('click',(params)=>{
                    
                    $this.modalData = {
                        name:params.data.name,
                        date:$this.startTime,
                        groupName:$this.depName,
                        score:params.data.value,
                        rank:params.data.rank
                    }
                    $this.showModal = true;
                })
                this.showLoading = false
            })
        }
    },
    mounted() {
        bus.$on("eff-select-dep", msg => {
            this.depName = msg.depName;
            this.startTime = msg.startTime;
            this.renderChart();
        });
    },
}
</script>

<style lang="" scoped>

</style>
